<template>
	<view class="content">
		<image class="bg" :src="backgroundImage" mode=""></image>
		<view class="btn-box _df _jb _ac">
			<image class="close" @click="close" src="@/static/img/index/yyIcon1.png" mode=""></image>
			<!-- <image class="share" src="@/static/img/index/yyIcon2.png" mode=""></image> -->
		</view>
		<view class="title-box">
			<view class="title">
				{{fileName}}
			</view>
			<view class="info">
				{{fileLabel}}
			</view>
		</view>
		<view class="audio">
			<wy-audio
				ref="audio"
				:activeIndex="audioActiveIndex" 
				:audioData="audioList" 
				:autoplay="autoplay"
				:showAudioListIcon="showAudioListIcon" 
				:showAudioSpeedIcon="showAudioSpeedIcon"
				@onOpenAudioList="onOpenAudioList"
				@onAudioChange="onAudioChange"
				@onAudioEnd="onAudioEnd"
			></wy-audio>
		</view>
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	export default {
		data() {
			return {
				fileName:'',
				fileLabel:'',
				backgroundImage:'../../../static/img/index/yyBg.png',
				audioActiveIndex:0,
				audioList:[],
				autoplay:true,
				showAudioListIcon:true,
				showAudioSpeedIcon:true,
				id:null,
				musicId:null,
				type:2,
				oneType:0,
				data:{},
				keyWords:''
			};
		},
		onLoad(options) {
			if(options){
				if(options.id){
					this.id = options.id
				}
				if(options.type){
					this.type = options.type
				}
				if(options.oneType){
					this.oneType = options.oneType
				}
				if(options.activeIndex){
					this.activeIndex = options.activeIndex
					this.audioActiveIndex = Number(options.activeIndex)
				}
				if(options.keyWords){
					this.keyWords = options.keyWords
				}
			}
		},
		watch:{
			type(v){
				this.type = v
				// this.getList()
			}
		},
		onShow() {
			this.getList()
			
		},
		methods:{
			saveTimeRecord(){
				let that = this
				uni.$_get({
					url: "saveTimeRecord|" +'?type=' + this.oneType,
					that: that,
					success(res) {
						let data = res.data;
						if(res.code == 0){
							let tip = that.oneType == 1?'今日正念次数+1':'今日冥想次数+1'
							uni.showToast({
								title:tip,
								icon:'none',
								duration:1500
							})
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			getList(){
				let that = this
				let _url = ''
				if(this.type==0){
					_url = "findBannerByType|" + this.oneType
				}else if(this.type==1){
					_url = "get-music-history"
				}else if(this.type==2){
					_url = "findMusicByType|" + this.id
				}else{
					_url = "searchMusicByName|" + this.keyWords
				}
				uni.$_get({
					url: _url,
					that: that,
					success(res) {
						if(res.code == 0){
							let data = res.data
							data.map(item =>{
								if(item.fileUrl){
									if(item.fileUrl.indexOf('http') == -1){
										item.fileUrl = config.host1 + item.fileUrl
									}
								}
								if(item.bannerUrl){
									if(item.bannerUrl.indexOf('http') == -1){
										item.bannerUrl = config.host1 + item.bannerUrl
									}
								}
								
								
							})
							that.audioList = data
							that.fileName = that.audioList[that.activeIndex].fileName
							that.fileLabel = that.audioList[that.activeIndex].fileLabel
							that.musicId = that.audioList[that.activeIndex].id
							that.saveHistory()
							that.backgroundImage = that.audioList[that.activeIndex].bannerUrl
							console.log(that.audioList)
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			saveHistory(){
				let that = this
				uni.$_get({
					url: "saveHistory|" + this.musicId,
					that: that,
					success(res) {
						let data = res.data;
						if(res.code == 0){
							
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			close(){
				this.$refs.audio.back()
				uni.navigateBack()
				
			},
			// 点击循环
			onOpenAudioList(){
				this.audioActiveIndex = 0
				this.autoplay = true
			},
			// 切换音频
			onAudioChange(data, index){
				this.audioActiveIndex = index;
				if(data.fileName){
					this.fileName = data.fileName
				}
				if(data.fileLabel){
					this.fileLabel = data.fileLabel
				}
				if(data.bannerUrl){
					this.backgroundImage = data.bannerUrl
				}
				console.log(data)
				this.musicId = data.id
				this.saveHistory()
			},
			onAudioEnd(){
				this.saveTimeRecord()
			}
		},
		onUnload(){
			this.$refs.audio.back()
		},
		onBackPress(options) {
			this.$refs.audio.back()
			// if(options.from === 'backbutton'){
			// 		return true
			// 	}
			// 	// 否则则允许返回
			// 	return false;
		},
	}
</script>

<style lang="scss" scoped>
.content{
	background-position: center;
	height: 100vh;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	padding: 100rpx 30rpx 0;
	box-sizing: border-box;
	.bg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		filter: blur(5px);
		// backdrop-filter: blur(10px);
		object-fit: cover;
		&::before{
			width: 100%;
			height: 100%;
			display: block;
			content: '';
			background-color: rgba(0,0,0,0.15);
			position: absolute;
			left: 0;
			top: 0;
		}
	}
	.btn-box{
		.close{
			width: 62rpx;
			height: 62rpx;
		}
		.share{
			width: 72rpx;
			height: 73rpx;
		}
	}
	.title-box{
		text-align: center;
		padding-top: 50rpx;
		z-index: 2;
		position: relative;
		.title{
			font-size: 48rpx;
			font-family: $uni-font-family-Bold;
			color: #ffffff;
			text-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.50); 
			margin-bottom: 15rpx;
		}
		.info{
			font-size: 36rpx;
			color: #ffffff;
			text-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.50); 
		}
	}
	.audio{
		position: absolute;
		bottom: 60rpx;
		left: 0;
		width: 100%;
		z-index: 99;
	}
}
</style>
